<!-- 图片上传组件:返回图片地址 -->
<template>
    <div class="mians">
      <el-upload list-type="picture-card" :action="action" :show-file-list="false" 
          :headers="headers"
          :before-upload="beforeAvatarUpload"
          :on-success="successFile" 
           name="file">
              <img v-if="picUrl" :src="picUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
  </template>
  <script>
  export default {
    name: 'mysend',
    props: {
      picUrl: {
        type: String,
        default:""
      }  
    },
    watch:{
      picUrl:function(newVal){
          //  console.log(newVal)
           this.path = newVal
      }  
    },
    data(){
      return{
          headers: {
                token: window.sessionStorage.getItem("token")
          },
          action:"",
          path:""
      }
    },
    mounted(){
         if(process.env.NODE_ENV=="development"){
            this.action = "/api/file/uploadImage"
         }else{
            this.action = "https://grove.cpzsyun.com:82/ryapi/foster/file/uploadImage"
         }
    },
    methods:{
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return   isLt2M;
      },
      successFile(res,files) {
              // console.log(res)
             if(res.code!=200)return this.$message.error(res.msg)
            this.path=res.msg
            this.$emit('getUrl',res.msg)
      },
    }
  }
  </script>
  <style lang="less" scoped>
  .avatar {
        width: 146px;
        height: 146px;
        border-radius: 5px;
    }
</style>